// 文本超出显示省略号
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 步骤条
@mixin cus-steps {
  counter-reset: count;
  display: flex;
  justify-content: center;
  align-items: center;
  --active-color: #007afa;
  --inActive-color: #a7a7a7;
  --line-color: #999;

  .step-item {
    display: flex;
    align-items: center;
    color: var(--inActive-color);

    .name {
      margin: 0 10px;
    }

    &:before {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid var(--inActive-color);
      line-height: 20px;
      text-align: center;
      counter-increment: count;
      content: counter(count);
      font-size: 12px;
    }

  }

  .step-item:not(:last-of-type) {
    &:after {
      display: inline-block;
      content: '';
      width: 131px;
      height: 1px;
      background-color: var(--line-color);
      margin-right: 10px;
    }
  }

  .step-item.is-progress,
  .step-item.is-success {
    color: var(--active-color);

    &:before {
      border: 1px solid var(--active-color);
    }
  }
  .step-item.is-success {
    &:before {
      background-color: var(--primary-color);
      color: #fff;
    }
    &:after {
      background-color: var(--primary-color);
    }
  }
}